<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {

            position: relative;
            z-index: 1;
        }

        .alert-box {
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            width: 100vw;
            height: 90vh;
            flex-direction: row; /* 子元素横向排列 */
            justify-content: center; /* 相对父元素水平居中 */
            align-items: center; /*  子元素相对父元素垂直居中 */
            z-index: 9999;
        }

        .alert {
            width: 400px;
            height: 200px;
            background: white;

        }

        .alert-title {

        }

        .alert-footer {
            height: 45px;
        }
    </style>
    <script src="../plugin/iconfont/iconfont.js"></script>
    <link rel="stylesheet" href="../plugin/iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/default.css">
    <link rel="stylesheet" href="../css/util/base.css">
    <script src="../js/util/alert.js"></script>
</head>
<body>
<ul style="text-align: center">
    <li>1111</li>
    <li>1111</li>
    <li>1111</li>
    <li>1111</li>
    <li>1111</li>
    <li>1111</li>
    <li>1111</li>
    <li>1111</li>
    <li>1111</li>
    <li>1111</li>
    <li>1111</li>
</ul>
<div class="alert-box" style="opacity: 0.2;background: rgba(175, 184, 187, 0.53); "></div>
<div class="alert-box">
    <div class="alert" style="border-radius: 6px">
        <p class="alert-title" style="height: 40px;border: 1px solid #f3ebeb;border-radius: 2px;margin: 2px;line-height: 40px;font-size: 18px;font-weight: bold;display:flex;justify-content: space-between">
            <span class="alert-title-content" id="alert-title" style="margin-left: 10px">警告</span>
            <a href="javascript:void(0)"
                    class="alert-title-close" style="margin-right: 15px"><i class="iconfont icon-close"></i></a></p>
        <div class="alert-content" id="alert-content" style="width:96%;height: calc(200px - 100px);margin: 1px auto">

        </div>
        <div class="alert-footer" style="height: 40px;border: 1px solid #f3ebeb;border-radius: 2px;margin: 4px;font-size: 18px;font-weight: bold;display:flex;align-items: center;justify-content: flex-end">
            <button id="alert-ok" style="height:32px;padding:3px 15px;border: 1px solid #1db7fd;border-radius:3px;background: #30a1d2">确定</button>
            <button id="alert-cancel"  style="height:32px;padding:3px 15px;;border: 1px solid #faa850;border-radius:3px;background: #fdd497;margin:0 15px">取消</button>
        </div>
    </div>
</div>
<script>
   // message.info({content:"你好世界！"})
</script>
</body>
</html>
